<div class="flex flex-col gap-4 w-full" data-controller="<%= stimulus_id %>">
  <%= render component("ui/forms/field").select(
    @form_field_name,
    :country_id,
    Spree::Country.all.map { |c| [c.name, c.id] },
    object: @addressable,
    value: @addressable.try(:country_id),
    "data-#{stimulus_id}-target": "country",
    "data-action": "change->#{stimulus_id}#loadStates"
  ) %>

  <%= content_tag(:div,
    data: { "#{stimulus_id}-target": "stateNameWrapper" },
    class: (@addressable.country&.states&.empty? ? "flex flex-col gap-2 w-full" : "hidden flex flex-col gap-2 w-full")
      ) do %>
    <%= render component("ui/forms/field").text_field(
      @form_field_name,
      :state_name,
      object: @addressable,
      value: @addressable.try(:state_name),
      "data-#{stimulus_id}-target": "stateName"
    ) %>
  <% end %>
  <input autocomplete="off" type="hidden" name=<%= "#{@form_field_name}[state_id]" %>>

  <%= content_tag(:div,
    data: { "#{stimulus_id}-target": "stateWrapper" },
    class: (@addressable.country&.states&.empty? ? "hidden flex flex-col gap-2 w-full" : "flex flex-col gap-2 w-full")
      ) do %>
    <%= render component("ui/forms/field").select(
      @form_field_name,
      :state_id,
      state_options,
      object: @addressable,
      value: @addressable.try(:state_id),
      "data-#{stimulus_id}-target": "state"
    ) %>
  <% end %>
</div>
